<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit"  @up="upCallback" :up="{use: false}" :down="{use:false}">
		<view class="index index-bg " :style="[headerStyle]">
			<!-- 微信端 -->
			<u-sticky bg-color="transparent">
				<view class="flex row-center  p-b-20 index-bg" style="padding-top: 100upx;position: relative;">
					<!-- <view>
						<u-icon name="map-fill" color="#fff" size="32"></u-icon>
						当前城市：
					</view> -->
					<view class="gift-icon" @click="opencoupon">
						<image src="../../static/images/gift-icon.png" mode="widthFix"></image>
					</view>
				<!-- 	<router-link to="/bundle/pages/discounts_card/discounts_card" class="gift-left" style="position: absolute;left: 30upx;">
						<u-icon name="gift-fill" color="#fff" size="36"></u-icon>
					</router-link> -->
					<view class="flex">
						<view class="login-name">
							货司拉
							<!-- <image src="https://hy.qslmkj.com/uploads/images/20211217145503491365376.png" mode="" style="width: 126upx;height: 58upx;background-color: #f00;"></image> -->
						</view>
						<view class=" ns m-l-20" style="color: rgb(230,187,176);">
							<navigator url="/pages/area_list/area_list" hover-class="none">
								{{cityNow}}
							</navigator>
						</view>
					</view>
					
					
					<view class="m-l-5">
						<u-icon name="arrow-down" color="rgb(230,187,176)" size="18"></u-icon>
					</view>
				</view>
			</u-sticky>	
			
			<view class="">
			
				<index-swiper  ref="indexSwiper" @changePrice="computedMoneyFun" ></index-swiper>
				<!-- <block v-if="sendShow"> -->
					<index-send
						@computedMoneyFun="computedMoneyFun" 
						ref="indexSend" 	
						@changeCity="changeCity" 
						:total="total" 
						@nowCar="nowCar"
						@appCar="appCar"
						:total_two="total_two"
						@changcartype="changcartype"
					></index-send>
				<!-- </block> -->
				<!-- <index-order></index-order> -->
				<!-- <index-bottom :list="bottomList"></index-bottom> -->
			</view>
			
			<!-- 预约时间 -->
			<u-select-new :list="subList" v-model="subTimeShow" @confirm="selectSure($event)" title="用车时间" mode="mutil-column-auto"></u-select-new>
			
		</view>
	</mescroll-body>

</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import QQMapWX  from '@/js_sdk/qqmap-wx-jssdk/qqmap-wx-jssdk.min'
	import hour from '@/utils/time.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {computeMoney,useCoupon} from '@/api/user';
	import {
		getMenu,
		getHome,
		getHotGoods,
		getLevelOneList
	} from "@/api/store"
	
	import {
		getRect,
		setTabbar
	} from '@/utils/tools'
	const app = getApp()
	const homeItem = {
		name: '首页'
	}
	export default {
		mixins: [MescrollMixin, MescrollCompMixin],
		watch:{
			cityNow(value){
				this.$refs.indexSwiper.getIndexCarFun();
				
			},
		},
		data() {
			return {
				sendShow:false,
				active: 0,
				navBg: 0,
				goodsList: [],
				homeData: {},
				navList: [],
				enable: true,
				cateList: [homeItem],
				showCateList: [],
				bottomList:[
					{},{},{}
				],
				swiperList:[],
				typeList:[],
				mapwx:null,
				cityNow:'请选择',
				mapgd:null,
				total:{
					price:"",
					couponId:0,
					couponmoney:0,
					couponprice:0
				},
				total_two:{
					price:"",
					couponId:0,
					couponmoney:0,
					couponprice:0
				},
				province:'',
				district:'',
				pricetype:1,
				subList:[],
				subTimeShow:false,
				time:0,
				is_enough:true,
				selectroute:{},
				onecopon:-1,
				twocopon:-1
			}
		},
		
		async onLoad(options) {
		    console.log(options);
			this.subList = hour.today;
			// this.mapwx = new QQMapWX({
			// 	 key: '4NHBZ-5VN3J-HWJF7-FXZ4U-ZEWUS-CYFLE'
			// })
			
			// this.mapwx.search({
			// 	 keyword: '酒店',
			// 	success: function (res) {
			// 		console.log(res);
			// 	},
			// 	fail: function (res) {
			// 		console.log(res);
			// 	},
			// })
			// this.getUserLocation();
			// setTabbar()
			uni.$on('refreshhome', () => {
				this.getHomeFun()
			})
			
			uni.$on('common_select',(e)=>{
				this.selectroute=e
			})
			uni.$on('addressSelect',({id,address,city,district,province})=>{
				this.$refs.indexSwiper.addressInfo.name = address;
				this.$refs.indexSwiper.addressInfo.detail = province + city + district;
				this.$refs.indexSwiper.addressInfo.id = id;
				
			})
			
		},
		onUnload() {
			uni.$off('refreshhome')
		},
		async onShow() {
			this.enable = this.active == 0 ? true : false
			this.getCartNum()
			this.onecopon=uni.getStorageSync("onecopon")
			this.twocopon=uni.getStorageSync("twocopon")
			uni.removeStorageSync("twocopon")
			uni.removeStorageSync("onecopon")
			console.log(this.onecopon);
			if(this.total.price){
				// console.log(this.one_price);
				if(this.onecopon=='a'){
					  this.total.couponId='a'
					this.total.couponprice=this.total.price
					return
				}else if(this.twocopon=='b'){
					 this.total_two.couponId='b'
						this.total_two.couponprice=this.total_two.price
						return
				}
			}
			if(this.onecopon){
				if(this.pricetype==1){
					
				 let res = await useCoupon({money:this.total.price,status:1,id:this.onecopon})
				  
				if(res.code==0){
					this.total.couponprice=this.total.price
				}else{
					this.total.couponprice=res.data.discount_money
					this.total.couponId=res.data.id
					this.total.couponmoney=res.data.preferential
					}
					}
			}
			if(this.twocopon){
				if(this.pricetype==2){
				let res = await useCoupon({money:this.total_two.price,status:2,id:this.twocopon})
				
			if(res.code==0){
					this.total_two.couponprice=this.total_two.price
				}else{
			this.total_two.couponprice=res.data.discount_money
			this.total_two.couponId=res.data.id
			this.total_two.couponmoney=res.data.preferential
				}
					}
			}
			
		},
		onShareAppMessage() {
			const shareInfo = this.appConfig.share
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode
			};
		},
		onHide() {
			// #ifdef H5
			this.enable = false
			// #endif
	
			this.time=0
		},
		methods: {
			opencoupon(){
				uni.navigateTo({
					url:"bundle/pages/user-preferential/user-preferential"
				})
			},
			...mapActions(['getCartNum']),
			selectSure(e){
			
				this.time = e;
				uni.setStorageSync("appointtime",)
				this.nowCar();
			},
			appCar(){
				this.subTimeShow = true;
			},
			changeCity(name){
				
				if(!this.isCityChoose){
					this.cityNow = name;
				}
				
			},
			changcartype(type){
				this.pricetype=type
			},
			computedMoneyFun(){
				let isCarry = true
				let {indexSwiper,indexSend} = this.$refs
				
			
					this.sendShow = true;
				
				let car_id = indexSwiper.list[indexSwiper.cateActive].car[indexSwiper.carActive].category_id
				// 创建个新数组
				let addressList =  indexSend.addressList.concat();
				
				var transport_address = [];
				
			
				// 筛选空数组		
				addressList.forEach((item,index)=>{
					if(item.name==null && item.is_start != 1){
						addressList.splice(index,1);
						return 
					}
					if(index==addressList.length-1){
						return 
					}				
					if(addressList[index+1].name==null){
						return
					}
					transport_address.push( {
						start_latitude:addressList[index].latitude,
						start_longitude:addressList[index].longitude,
						start_address:addressList[index].name,
						start_province:addressList[index].province,
						start_city:addressList[index].city,
						start_district:addressList[index].district,
						end_latitude:addressList[index+1].latitude,
						end_longitude:addressList[index+1].longitude,
						end_address:addressList[index+1].name,
						end_province:addressList[index+1].province,
						end_city:addressList[index+1].city,
						end_district:addressList[index+1].district,
						type:addressList.length-2==index?1:2
					})
				})
				
		
				
				
			
				this.$store.commit('setTranInfo',transport_address)
				// if(transport_address)
				
				transport_address.forEach(item=>{
					if(item.start_address==null || item.end_address==null){
						isCarry = false;
					}
				})
				if(transport_address.length==0 || isCarry == false){
					return 
				}
				
				computeMoney({
					car_id,
					is_carry:1,
					transport_address:JSON.stringify(transport_address),
				}).then(async({code,data})=>{
					if(code==1){
						this.total.price = data.price;
						this.total_two.price = data.price_two
						this.is_enough = Boolean(data.is_enough)
						let res = await useCoupon({money:this.total.price,status:1,id:0})
						if(res.code==0){
							this.total.couponprice=this.total.price
						}else{
							this.total.couponprice=res.data.discount_money
							this.total.couponId=res.data.id
							this.total.couponmoney=res.data.preferential
						}
						
						let res2 = await useCoupon({money:this.total_two.price,status:2,id:0})
						console.log(res2);
						if(res2.code==0){
							this.total_two.couponprice=this.total_two.price
						}else{
					this.total_two.couponprice=res2.data.discount_money
					this.total_two.couponId=res2.data.id
					this.total_two.couponmoney=res2.data.preferential
						}
					
					} 
					if(code==0) this.total = '';
				})
					
			},
			nowCar(){
				let {indexSwiper,indexSend} = this.$refs
				let car_category_id = indexSwiper.list[indexSwiper.cateActive].id
				let is_open = indexSwiper.list[indexSwiper.cateActive].is_open
				
				if(!is_open){
					this.$toast({
						title:"该城市暂未开通服务"
					})
					return 
				}
				
				let label = indexSwiper.label
				
				
				let car_obj = indexSwiper.list[indexSwiper.cateActive].car[indexSwiper.carActive]
			
				
				let addressList =  indexSend.addressList.concat();
				let car_info = {
					label,
					car_category_id,
					car_mes:car_obj
				}
				
			

				let timestring = 1
			
				if( this.time == 0){
					timestring = 0;
				
				}
				if(timestring==1){
					// let timeArr = 
					this.$store.commit('setTimeInfo',this.time);
				}
			
				this.$store.commit('setCarInfo',car_info)
				this.$store.commit('setAddress',addressList)
				console.log(this.total.couponId,this.total_two.couponId);
				uni.navigateTo({
					url:'/pages/confirm_order/confirm_order?price=' + this.total.price+ '&time=' + 
					timestring +'&total_two='+this.total_two.price+'&cartype='+this.pricetype+"&onecopon="+ this.total.couponId+  "&twocopon="+ this.total_two.couponId
				})
			},
			// 获取菜单
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1
				});
				if (code == 1) {
					this.navList = data
				}
			},
			
			// 获取首页数据
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				if (code == 1) {
					this.homeData = data
				}
			},
			changeActive(index) {
				this.active = index
				this.enable = index == 0
				this.mescroll.optDown.use = index == 0
				this.showCateList[index] = true
			},
			async downCallback() {
				// await this.getLevelOneListFun()
				await this.getMenuFun()
				await this.getHomeFun()
				this.$refs.mescrollItem.getData()
				this.mescroll.endSuccess(0, false)
			}
		},
		computed: {
			...mapGetters(['sysInfo', 'inviteCode', 'appConfig']),
			navH() {
				return this.sysInfo.navHeight + 'px'
			},
			// 分类栏悬浮高度
			cateTop() {
				return this.sysInfo.navHeight + uni.upx2px(80) + 'px'
			},
			headerStyle() {
				const {
					active,
					cateList,
					appConfig
				} = this
				let bg = cateList[active].bg_image
				if (active == 0) {
					bg = appConfig.index_setting.top_bg_image
				}
				return bg ? {
					'background-image': `url(${bg})`
				} : {}

			}
		},
	beforeDestroy() {
		
	}
	}
</script>

<style lang="scss" >
	page{
		background:none !important;
	}
	page {
	    /* 定义一些主题色及基础样式 */
	    font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
	    font-size: 28rpx;
	    color: $-color-normal;
			padding: 0;
		padding-bottom: env(safe-area-inset-bottom);
	   background-color:#FFFFFF;
	}
	.gift-icon{
		position: absolute;
		left: 36rpx;
		top: 68rpx;
		image{
			width: 56rpx;
			height: 56rpx;
		}
		
	}
	.login-name{
		font-weight: bold;
		font-style: italic;
		color: rgb(230,187,176);
		font-size: 38upx;
		
		// text-shadow :5px 5px 5px #ededed;
		-webkit-text-stroke:1upx #666;
	}
	.gift-left{
		background-color: rgb(201,77,40);
		padding: 10upx 20upx;
		border-radius: 30upx;
		border: 1upx solid rgb(187,189,190);
	}
	
	.index-bg {
		
		background-image: url(https://hy.qslmkj.com/uploads/images/202112311241177c7392248.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: #fff;
	}

	.index {
		min-height: calc(100vh - var(--window-bottom));
		
		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}

		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, .4);
		}
	}
	 .picker-view {
	        width: 750rpx;
	        height: 600rpx;
	        margin-top: 20rpx;
	    }
	    .item {
	        height: 50px;
	        align-items: center;
	        justify-content: center;
	        text-align: center;
	    }
</style>
